﻿var _xjStatusBar;

function xjStatusBar(options) {
    this.options = options;

    if (options.target !== undefined) {
        
        var container = function () {

            var togglesUL = function () {
                return $("<ul/>", { "id": "xjStatusBar_togglesUL" })
                    .css({
                        "padding": "0px !important",
                        "list-style-type": "none",
                        "margin": "0px",
                        "width": "16px"
                    });
            };
            
            var contentDiv = function () {
                return $("<div/>", { "id": "xjStatusBar_contentContainer" })
                    .css({
                        "display":"none",
                        "position":"relative",
                        "padding": "5px",
                        "margin": "0px",
                        "height": "0px",
                        "width": "300px",
                        "background-color":"#ccc"
                    })
                    .append($("<div/>", { "id": "xjStatusBar_content" })
                        .css({
                            "background":"#fff",
                            "height": "100%",
                            "width":"100%"
                        }));
            };

            return $("<div/>", { "id": "xjStatusBar_container" })
                .css({
                    "position": "absolute",
                    "padding": "0px !important"
                })
                .append(togglesUL)
                .append(contentDiv);
        };
        
        options.target.append(container);        

        this.SetLocation()            
            .SetResizeFunc();
        
        _xjStatusBar = this;
    }
};

xjStatusBar.prototype = {
    successes: [],
    failures: [],
    changes: [],
    contentHeight: 150,
    contentWidth:300,
    SetResizeFunc: function () {
        var statusBar = this;

        var resizeFunc = function () {
            statusBar.SetLocation(statusBar.options);
        };

        $(window).on("resize", resizeFunc);
    },
    SetLocation: function () {
        var container = $("#xjStatusBar_container");
        var containerPosition;
        var togglesPosition;
        switch (this.options.location) {
            case "tr":
            default:
                containerPosition = {
                    "margin-top": this.options.target.offset().top + "px",
                    "top": "0px",
                    "right": $(document).width() - this.options.target.width() - this.options.target.offset().left + 3 + "px"
                };
                togglesPosition = {
                    "margin-right":"8px",
                    "margin-left":"auto"
                };
                break;
            case "tl":
                containerPosition = {
                    "margin-top": this.options.target.offset().top + "px",
                    "top": "0px",
                    "left": "3px"
                };
                togglesPosition = {
                    "margin-right":"auto",
                    "margin-left":"3px"
                };
                break;
            case "bl":
                break;
            case "br":
                containerPosition = {
                    "margin-top": this.options.target.height() - this.options.target.offset().top - 2 + "px",
                    "top":"0px",
                    "right": $(document).width() - this.options.target.width() - this.options.target.offset().left + 3 + "px"
                };
                togglesPosition = {
                    "margin-right":"6px",
                    "margin-left":"auto"
                };
                break;
        }
        
        container.css(containerPosition);
        container.find("ul").css(togglesPosition);
        return this;
    },
    SetBorder: function () {
        var togglesUL = $("#xjStatusBar_togglesUL");
        var toggleBorder;

        var toggles = togglesUL.find("li");

        switch (this.options.location) {
            case "tr":
            case "tl":
            default:
                toggles.css("border-top-width", "0px" );
                break;
            case "bl":
            case "br":
                toggles.css("border-bottom-width", "0px");
                break;
        }

        return this;
    },
    SetCorners: function () {
        var toggleCorners;

        switch (this.options.location) {
            case "tr":
            case "tl":
            default:
                toggleCorners = "ui-corner-br ui-corner-bl";
                break;
            case "bl":
            case "br":
                toggleCorners = "ui-corner-tr ui-corner-tl";
                break;
        }

        var toggles = $("#xjStatusBar_togglesUL").find("li");

        toggles.addClass(toggleCorners);
        return this;
    },
    ToggleVisibility: function (forceHide) {
        if (hide === true)//seems obvious but sometimes it could be an object and not True, thereby circumventing the boolean logic attempted
        {
            $(".successesToggle").hide();
            $(".errorsToggle").hide();
            $(".changesToggle").hide();
            $("#uxSuccessesFlyout").hide();
            $("#uxErrorsFlyout").hide();
            $("#uxChangesFlyout").hide();
        }
        else {
            $(".successesToggle").toggle($status.successes != undefined && $status.successes.length > 0);
            $(".errorsToggle").toggle($status.failures != undefined && $status.failures.length > 0);

            $("#FailFlyout").hide(); // hide the flyout just in case it is currently being shown and there are no errors to show anymore (see bug 5047)
            if ($status.failures) {
                $("#StatusBar").show();
                $("#FailFlyout > .ItemList").empty().append(GetItemsUL($status.failures)[0]);

                if ($status.failures.length > 0) {
                    $("#FailFlyout").show();
                }
            }

            if ($status.successes) {
                setTimeout(function () {
                    $("#StatusBar").fadeOut(1000);
                }, 10000);
                $("#StatusBar").show();
                $("#SuccessFlyout > .ItemList").empty();
                $("#SuccessFlyout > .ItemList").append(GetItemsUL($status.successes)[0]);
            }

        }
    },
    AddStatus: function (status) {

        var statusBar = this;

        var contentContainer = $("#xjStatusBar_contentContainer");
        var isShown = contentContainer.css("display") != "none";

        var addSuccess = function () {
            statusBar.successes.push(status.message);

            if ($("#xjStatusBar_SuccessToggleButton").length == 0) {
                $("#xjStatusBar_togglesUL")
                    .append($("<li/>", { "id": "xjStatusBar_SuccessToggleButton" })
                            .addClass("statusBar-toggle ui-state-default")
                            .css({
                                "position": "relative",
                                "display": "block",
                                "width": "20px",
                                "text-align": "center",
                                "border-color": "green",
                                "background": "#DDFFDD"
                            })
                            
                            .append($("<span/>")
                                .css({
                                    "color": "green"
                                })
                                .html("&#10003;")
                            ));

                var ogWidth = $(".statusBar-toggle").width();
                var ogHeight = $(".statusBar-toggle").height();
                var ogPosition = $("#xjStatusBar_SuccessToggleButton").position();
                var ogSpan = $("#xjStatusBar_SuccessToggleButton").find("span");

                $("#xjStatusBar_SuccessToggleButton")
                    .on("mouseenter", function () {
                        isShown = contentContainer.css("display") != "none";
                        $(this)
                            .css({
                                "cursor": "pointer"
                            })
                        .stop(true, true)
                        .animate({
                            "width": ogWidth + 4 + "px",
                            "height": ogHeight + 4 + "px",
                            "top": -4,
                            "left":-4
                        }, "fast");

                        if (isShown) {
                            contentContainer.stop(true, true).animate({
                                "top":-4
                            }, "fast");
                        }

                        ogSpan.stop(true, true).animate({ "font-size": "20px" }, "fast");
                    })
                    .on("mouseleave", function () {
                        isShown = contentContainer.css("display") != "none";
                        $(this)
                            .css({
                                "cursor": "default"
                            })
                            .stop(true, true)
                            .animate({
                                "width": ogWidth + "px",
                                "height": ogHeight + "px",
                                "top": 0,
                                "left": 0,
                            }, "fast");

                        if (isShown) {
                            contentContainer.stop(true, true).animate({
                                "top": 0
                            }, "fast");
                        }

                        ogSpan.stop(true, true).animate({ "font-size": "16px" }, "fast");
                    });

                statusBar.SetBorder()
                    .SetCorners();
            }

            $("#xjStatusBar_SuccessToggleButton").attr("title", "Successes: [" + statusBar.successes.length + "]")

        };

        switch (status.type) {
            case "success":
                addSuccess();
                break;
        }

        var attachToggleClick = function () {
            $(".statusBar-toggle")
                .on("click", function () {
                    if (isShown) {
                        contentContainer.animate({
                                "height": 0
                            }, "fast", function () {
                                contentContainer.hide();
                            }
                        );
                    }
                    else {
                        contentContainer.show();
                        contentContainer.animate({
                                "height": statusBar.contentHeight
                            }, "fast", function () {
                                
                        });
                    }
                    
                    $("#xjStatusBar_container").animate({
                        "top": isShown ? 0 : -statusBar.contentHeight
                    }, "fast", function () {
                        $(".statusBar-toggle").trigger("mouseleave");
                    });

                });
        };

        attachToggleClick();
    }
}
